const $siteList = $('.siteList')
const $lastLi = $siteList.find('li.last')
const x = localStorage.getItem('x')
const xObject = JSON.parse(x)
const hashMap = xObject || [
  { logo: 'A', logoType: 'text', url: 'https://www.acfun.cn' },
  { logo: 'B', logoType: 'image', url: 'https://www.bilibili.com' },
]
const simplifyUrl = (url) => {
  return url.replace('https://', '')
            .replace('http://', '')
            .replace('www.', '')
            .replace(/\/.*/, '')
}
const render = () => {
  $siteList.find('li:not(.last)').remove()

  hashMap.forEach((node, index) => {
    const $li = $(`
    <li>
      <div class="site">
        <div class="logo">${node.logo}</div>
        <div class="link">${simplifyUrl(node.url)}</div>
        <div class="close">
          <svg class="icon">
            <use xlink:href="#icon-close"></use>
          </svg>
        </div>
      </div>          
    </li>
    `).insertBefore($lastLi)
    $li.on('click', () => {
      window.open(node.url)
    })
    $li.on('click', '.close', (e) => {
      e.stopPropagation()//阻止冒泡
      hashMap.splice(index, 1)
      render()
    })
  })

}

render()

$('.addButton')
  .on('click', ()=>{
    let url = window.prompt('请问你要添加的网址是什么？')
    if(url.indexOf('http') !== 0){
      url = 'https://' + url
    }
    hashMap.push({
      logo: simplifyUrl(url)[0].toUpperCase(),
      logoType: 'text',
      url
    })
    render()
  })

window.onbeforeunload = () => {
  const string = JSON.stringify(hashMap)
  localStorage.setItem('x', string)
}

$(document).on('keypress', (e)=> {
  console.log(e.key)
  const {key} = e
  for(let i = 0; i<hashMap.length;i++){
    if(hashMap[i].logo.toLowerCase() === key){
      window.open(hashMap[i].url)
    }
  }
})


class Ball {
  constructor(radius) {
      this.x = 0;
      this.y = 0;
      this.radius = radius;
      this.color = '';
  }

  draw(context) {
      context.save();
      context.translate(this.x, this.y);
      context.lineWidth = this.lineWidth;
      context.fillStyle = this.color;
      context.beginPath();
      //x, y, radius, start_angle, end_angle, anti-clockwise
      context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
      context.closePath();
      context.fill();
      context.restore();
  }
}


let last_snow_created_time = new Date();
let snows = [];
// 根据时间创造新的雪花与气泡
function createSnow() {
    let now = new Date();
    if (now - last_snow_created_time > snows.length - now.getMinutes() && snows.length < 1000) {
        const radius = Math.random() * 5 + 2;
        let snow = new Ball(radius);
        snow.x = Math.random() * canvas.width + 1;
        snow.color = '#ffffff';
        snows.push(snow);
        last_snow_created_time = now;
    }
}


function moveSnow(snow, index) {
  snow.y += snow.radius / 3;
  if (snow.y > canvas.height)
      snows.splice(index, 1);
  else
      snow.draw(context);
}

function drawFrame() {
  let animation = requestAnimationFrame(drawFrame);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(back_image, 0, 0, canvas.width, canvas.height);
  createSnow();
  snows.forEach(moveSnow);
}


let canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d');
let back_image = new Image();
back_image.src = 'https://pc-index-skin.cdn.bcebos.com/244eb61ad533e174d3639294ee55e095.jpg';
 
drawFrame();